<template>
	<div class="wrap">
		<basic-opt :has_left="true">
			<template #search>
				<div class="opt-item">
					<el-select style="width: 350px;" v-model="uuid_obj" value-key="id" remote
						:remote-method="uuidChange" @change="uuidChanged" filterable placeholder="请输入选择uuid"
						size="medium">
						<el-option v-for="(item,index) in uuidList" :key="index" :label="item.uuid" :value="item">
							<span>{{ item.uuid }}/{{ item.remark }}</span>
						</el-option>
					</el-select>
				</div>
			</template>
		</basic-opt>
		<div v-if="uuid">
			<el-tabs v-model="tab_name" @tab-click="handleTab" type="border-card">
				<el-tab-pane label="设备配置" name="设备配置">
					<device-config v-if="tab_name === '设备配置' && uuid"></device-config>
				</el-tab-pane>
				<el-tab-pane label="查看日志" name="查看日志">
					<device-logs v-if="tab_name === '查看日志' && uuid"></device-logs>
				</el-tab-pane>
				<el-tab-pane label="查看人脸组" name="查看人脸组">
					<device-face-group v-if="tab_name === '查看人脸组' && uuid"></device-face-group>
				</el-tab-pane>
				<el-tab-pane label="查看指令" name="查看指令">查看指令</el-tab-pane>
				<el-tab-pane label="查看设备心跳" name="查看设备心跳">
					<device-heart v-if="tab_name === '查看设备心跳' && uuid"></device-heart>
				</el-tab-pane>
				<el-tab-pane label="上传设备图片">上传设备图片</el-tab-pane>
				<el-tab-pane label="设备用户" name="设备用户">
					<device-user v-if="tab_name === '设备用户' && uuid"></device-user>
				</el-tab-pane>
				<el-tab-pane label="离线记录" name="离线记录">
					<device-offline-record v-if="tab_name === '离线记录' && uuid"></device-offline-record>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>

	<!--  mobile  -->
	<div class="mobile-wrap">
		<div class="mobile-search-vertical">
			<el-select style="width: 350px;" v-model="uuid_obj" value-key="id" remote :remote-method="uuidChange"
				@change="uuidChanged" filterable placeholder="请输入选择uuid" size="medium">
				<el-option v-for="(item,index) in uuidList" :key="index" :label="item.uuid" :value="item">
					<span>{{ item.uuid }}/{{ item.remark }}</span>
				</el-option>
			</el-select>
		</div>
		<div v-if="uuid">
			<el-tabs v-model="tab_name" @tab-click="handleTab" type="border-card">
				<el-tab-pane label="设备配置" name="设备配置">
				</el-tab-pane>
				<el-tab-pane label="查看日志" name="查看日志">
					<device-logs v-if="tab_name === '查看日志' && uuid"></device-logs>
				</el-tab-pane>
				<el-tab-pane label="查看设备心跳" name="查看设备心跳">
					<device-heart v-if="tab_name === '查看设备心跳' && uuid"></device-heart>
				</el-tab-pane>
				<el-tab-pane label="设备用户" name="设备用户">
					<device-offline-record v-if="tab_name === '设备用户' && uuid"></device-offline-record>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import API from '@/api/index.js'
	import DeviceConfig from '@/components/device/device-config.vue'
	import DeviceHeart from '@/components/device/device-heart.vue'
	import DeviceLogs from '@/components/device/device-logs.vue'
	import DeviceUser from '@/components/device/device-user.vue'
	import DeviceFaceGroup from '@/components/device/device-face-group.vue'
	import DeviceOfflineRecord from '@/components/device/device-offline-record.vue'

	export default {
		name: 'deviceOperation',
		components: {
			DeviceConfig,
			DeviceHeart,
			DeviceLogs,
			DeviceUser,
			DeviceFaceGroup,
			DeviceOfflineRecord
		},
		data() {
			return {
				uuidList: [],
				copy_uuidList: [],
				device_id: '',
				type: '',
				uuid_obj: '',
				uuid: '',
				tab_name: '',

				screen_min_width: document.body.clientWidth // 屏幕宽度
			}
		},
		mounted() {
			this.getScreenMinWidth();
			this.device_id = localStorage.getItem('device_id') ? localStorage.getItem('device_id') : '';
			this.type = localStorage.getItem('device_type') ? localStorage.getItem('device_type') : '';
			this.uuid = localStorage.getItem('device_uuid') ? localStorage.getItem('device_uuid') : '';
			this.uuid_obj = localStorage.getItem('device_uuid') ? localStorage.getItem('device_uuid') : '';
			this.tab_name = localStorage.getItem('tabName') ? localStorage.getItem('tabName') : '设备配置';
			window.location.hash = "#/device-operation?device_id=" + this.device_id + "&device_type=" + this.type +
				"&device_uuid=" + this.uuid;
		},
		methods: {
			// 判断横屏
			getScreenMinWidth() {
				let self = this;
				if (self.screen_min_width < '500') {
					self.$message.error({
						message: '请用横屏查看此页面'
					});
				}
			},
			uuidChange(val) {
				let self = this;
				API.devices(1, 10, 0, '', val).then(res => {
					let data = res.data.data;
					self.$notify({
						message: '获取uuid接口成功'
					});
					self.uuidList = data;
				}).catch(err => {
					self.$message.error(err.response.data.message)
				})
			},
			// 选中uuid
			uuidChanged(val) {
				let self = this;
				self.initData();
				self.$nextTick(function() {
					self.tab_name = '设备配置';
					self.uuid = val.uuid;
					localStorage.setItem('device_id', val.id);
					localStorage.setItem('device_type', val.type);
					localStorage.setItem('device_uuid', val.uuid);
					window.location.hash = "#/device-operation?device_id=" + val.id + "&device_type=" + val.type +
						"&device_uuid=" + val.uuid;
				});
			},
			// 清除数据
			initData() {
				let self = this;
				self.tab_name = '';
				self.uuid = '';
				localStorage.removeItem('device_id');
				localStorage.removeItem('device_type');
				localStorage.removeItem('device_uuid');
				localStorage.removeItem('tabName');
			},
			handleTab(val) {
				let self = this;
				self.tab_name = val.props.name;
				localStorage.setItem('tabName', self.tab_name)
			}
		},
		beforeUnmount() {
			let self = this;
			self.uuid = '';
			localStorage.removeItem('device_id');
			localStorage.removeItem('device_type');
			localStorage.removeItem('device_uuid');
			localStorage.removeItem('tabName');
		}
	}
</script>

<style>
</style>
